<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图书管理</title>
	<style>
		input{
			outline: none;
			margin-top: 20px;
			margin-bottom: 10px;
		}
		table{
			border-collapse: collapse;
			border-color: red;
			margin-left: 55px;
			margin-top: 20px;
		}
		table tr,td{
			width: 130px;
			text-align: center;
		}
		#content{
			display: none;
		}
		#add{
			display: none;
		}
	</style>
</head>
<body>
	<div id="search">
		书名：<input type="text" name="book" id="chaname">
		作者：<input type="text" name="author" id="chaauthor">
		价格：<input type="text" name="price" id="chaprice">
		<button id="find">查找</button>
		<button id="increase">增加</button>
	</div>
	<div id="content">
		<table border="1">
			<tr>
				<td>书名</td>
				<td>作者</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
		</table>
	</div>
	<div id="add">
		书名：<input type="text" name="book" id="addname">
		作者：<input type="text" name="author" id="addauthor">
		价格：<input type="text" name="price" id="addprice">
		<button onclick="addbook()">添加</button>
		<button id="cancel">取消</button>
	</div>		
</body>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
	//查找
	$("#find").click(function(){
		$("#content").css({
			display:"block"
		});
	});
	//增加
	$("#increase").click(function(){
		$("#add").css({display:"block"});
	});
	//取消
	$("#cancel").click(function(){
		$("#add").css({
			display:"none"
		});
	});
	//添加
	function addbook() {
		$("#add").css({display:"block"});
		var name = $("#addname")[0].value;
		var author = $("#addauthor")[0].value;
		var price = $("#addprice")[0].value;
		if(name == "" || author == "" || price == ""){alert("请正确输入");return;};
	}

</script>
</html>














